<template>
  <el-drawer v-model="drawerShow" direction="rtl" style="max-width: 460px">
    <template #header>
      <h4 v-if="type === 1">新增用户</h4>
      <h4 v-if="type === 2">编辑用户：{{ row.nickName }}</h4>
    </template>
    <template #default>
      <div class="user-update-form-box">
        <el-form :model="user" label-width="auto">
          <el-form-item label="用户名">
            <el-input v-model="user.username" :disabled="type === 2" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="user.nickName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="user.password" :placeholder="type === 2 ? '填写即视为修改密码' : '请输入'" clearable />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="user.email" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="user.status" placeholder="请选择">
              <el-option :value="1" label="启用">
                <el-tag>
                  启用
                </el-tag>
              </el-option>
              <el-option label="禁用" :value="0">
                <el-tag type="danger">
                  禁用
                </el-tag>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="角色">
            <el-select v-model="user.roleIdList" multiple placeholder="请选择">
              <el-option v-for="(item) in roleList" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-button @click="drawerShow = false" style="width: 100%">
                取消
              </el-button>
            </el-col>
            <el-col :span="12">
              <el-button type="primary" @click="handleUpdate" style="width: 100%">
                确认
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </template>
    <template #footer>
<!--      <div style="display: flex;justify-content: flex-start">-->
<!--        <el-button @click="cancelClick">-->
<!--          取消-->
<!--        </el-button>-->
<!--        <el-button type="primary" @click="confirmClick">-->
<!--          确认-->
<!--        </el-button>-->
<!--      </div>-->
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import {defineProps, onMounted, ref, watch} from 'vue'
import {listRole} from "@/service/RoleController";
import {updateUser} from "@/service/UserController";

interface UpdateProps {
  row: any;
  show: boolean;
  type: 1 | 2;
}

const {
  row,
  show,
  type,
} = defineProps<UpdateProps>();
const drawerShow = ref<boolean>(show);
const user = ref<any>({});
const roleList = ref<any[]>([]);

const emit = defineEmits<{
  (e: 'update:show', value: boolean): void
  (e: 'handleReturn'): void
}>();

watch(() => row, (newVal, oldVal) => {
  console.log("row改变", newVal);
  user.value = {
    ...newVal,
  }
}, {deep: true});

watch(() => show, (newVal, oldVal) => {
  drawerShow.value = newVal;
})
watch(drawerShow, (newVal) => {
  emit('update:show', newVal)
})

onMounted(async () => {
  const res = await listRole();
  if (res.code === "000000") {
    roleList.value = res.data;
  }
})

const handleUpdate = async () => {
  const res = await updateUser({
    ...user.value,
    id: row.id,
  });
  if (res.code === "000000") {
    emit("handleReturn");
  }
}

</script>

<style scoped lang="less">
@import "./index.less";
</style>